<template>
    <div class="home-recommond">
    <div class="wrapper" ref="wapper">

<ul class="content" ref="content">
<li v-for="(item,index) in listData" :key="index">
    @click="selectItem(item)">
    <div class="cover">
        <van-image :src="item.cover" radius="1rem"/>
        <span>{{item.listen_num | numFilter(1)}}万</span>
    </div>
    <span>{{item.title}}</span>
</li>
</ul>
    </div>
    </div>
</template>
<script>
   import { betterScrollHorizontal } from "../../common/betterScroll.js"
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getSongListData()
    },
            methods:{
            getListData(){
                this.$request('get','/recommend/playlist/u')
                .then(res=>{
                    console.log(res)
                    if(res.result == 100){
                        this.listData=res.data.list;
                    }

                    betterScrollHorizontal(
                        this,
                        this.$refs.wrapper,
                        this.$refs.content,
                        this.listData.length,
                        10
                    );

                 });
            },
            selectItem(item){
           const id= item.content_id;
            // close.log(id);
            // this.$router.push({
            //  name:"singlist",
            //  params:{
            //      id:id
            //  }
            // })
            this.$router.push({path:`/singlist/${id}`})
            }
        },
                   
        filters:{
            numFilter(value,num){
                return parseFloat(value/10000).toFixed(num)
            },
        },
    };
</script>
<style scoped>
.cover > span{
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background: #a6a0a0;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width:5rem;
    display: inline-block;
}
.cover{
    position: relative;
}
.wrapper{
    width: 100%;
    overflow: hidden;
}
/* ul.content {
    width: calc(12 * 10rem);
} */
ul.content li {
    display: inline-block;
    width: 10rem;
    vertical-align: top;
}
ul.content li *{
    margin: 0.1rem;
}
ul.content li > span{
    font-size: 0.8rem;
    color: #54493b;
}
</style>